<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form inline :model="queryParams">
            <el-form-item label="机型" prop="aircraftModel">
              <el-select v-model="queryParams.aircraftModel">
                <el-option v-for="(item, index) in airModelList" :key="'model-item' + index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="主分组" prop="groupType">
              <el-input v-model="queryParams.groupType" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="子分组" prop="subGroupType">
              <el-input v-model="queryParams.subGroupType" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="name">
              <el-input v-model="queryParams.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="图号" prop="code">
              <el-input v-model="queryParams.code" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
              <!-- <el-button icon="Refresh" @click="resetQuery">重置</el-button> -->
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="mb-10">
        <el-card shadow="hover">
          <el-table v-loading="tableLoading" :data="tableData" style="width: 100%">
            <el-table-column type="expand">
              <template #default="props">
                <div m="4">
                  <el-table :data="props.row.children">
                    <el-table-column label="名称" prop="name" />
                    <el-table-column label="层级" prop="level" />
                    <el-table-column label="图号" prop="code" />
                    <el-table-column label="版次" prop="version" />
                  </el-table>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="主分组" prop="groupType" />
            <el-table-column label="子分组" prop="subGroupType" />
            <!-- <el-table-column label="名称" prop="name" />
            <el-table-column label="层级" prop="level" />
            <el-table-column label="图号" prop="code" />
            <el-table-column label="版次" prop="version" /> -->
          </el-table>
          <pagination
            v-show="total > 0"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="total"
            @pagination="initData"
          />
        </el-card>
      </div>
    </transition>
  </div>
</template>

<script setup name="strengthModelList" lang="ts">
import { getStructureTree } from '@/api/elementsLibrary/index';
import { downloadData, generateList, strengthCrossTrackList } from '@/api/bomCompareTool/strengthModelList/index';
const router = useRouter();
const queryParams = reactive({
  subGroupType: '',
  groupType: '',
  aircraftModel: 'C919',
  code: '',
  name: '',
  pageNum: 1,
  pageSize: 10
});
const total = ref(1);
// 表格数据
let tableData = reactive([]);
const airModelList = ref([
  {
    label: 'C919',
    value: 'C919'
  },
  {
    label: 'C929',
    value: 'C929'
  }
]);
const tableLoading = ref(false);

// 获取当前实例
const { proxy } = getCurrentInstance();

const showSearch = true;
// 装机清单列表
const initData = async () => {
  tableLoading.value = true;
  const obj = {
    groupType: queryParams.groupType,
    subGroupType: queryParams.subGroupType,
    name: queryParams.name,
    code: queryParams.code,
    pageNum: queryParams.pageNum,
    pageSize: queryParams.pageSize
  };
  const res = await strengthCrossTrackList(queryParams.aircraftModel, obj);
  tableData = res.rows;
  tableData.forEach(async (item) => {
    const newObj = {
      groupType: item.groupType,
      subGroupType: item.subGroupType,
      pageNum: 1,
      pageSize: 50
    };
    const newRes = await strengthCrossTrackList(queryParams.aircraftModel, newObj);
    item.children = newRes.rows;
  });
  total.value = res.total;
  tableLoading.value = false;
};
// 搜索
const handleQuery = () => {
  queryParams.pageNum = 1;
  initData();
};
// 重置
const resetQuery = () => {
  queryParams.aircraftModel = 'C919';
  handleQuery();
};
// 查看详情
const handleDetail = (row) => {
  router.push({
    path: '/modelCompareTools/strengthModeDetail',
    query: { model: queryParams.aircraftModel, track: row.track, groupType: row.groupType, name: row.name, id: row.id }
  });
};
// 下载文件
const downloadFile = (res, fileName) => {
  const blob = new Blob([res]);
  const objUrl = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.setAttribute('href', objUrl);
  link.setAttribute('download', fileName);
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};
// 下载文件
const handleDownload = (row) => {
  const obj = {
    aircraftModel: queryParams.aircraftModel,
    ids: [row.id]
  };
  downloadData(obj).then((res) => {
    const contentDisposition = res.headers['content-disposition'];
    if (contentDisposition) {
      // 使用正则表达式提取filename（注意：这里的正则需要根据实际Content-Disposition的格式进行调整）
      const filename = contentDisposition.match(/filename="?([^"]+)"?/)[1];
      const fileName = decodeURIComponent(filename);
      downloadFile(res.data, fileName);
    }
  });
};
const modelList = async () => {
  const res = await getStructureTree();
  airModelList.value = res.data.map((item) => {
    return {
      value: item.mark,
      label: item.name
    };
  });
};
onMounted(() => {
  modelList();
  initData();
});
</script>

<style lang="scss" scoped></style>
